import './app.loader.ts';
import {Component, ViewEncapsulation} from '@angular/core';
import {GlobalState} from './global.state';
import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from './theme/services';
import {layoutPaths} from './theme/theme.constants';
import {BaThemeConfig} from './theme/theme.config';

/*
 * App Component
 * Top Level Component
 */
@Component({
    selector: 'app',
    template: `
    <main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
      <div class="additional-bg"></div>
      <router-outlet></router-outlet>
    </main>
  `,
  styleUrls: ['./normalize.css', './app.scss'],
   
})

export class App {

    isMenuCollapsed:boolean = false;

    constructor(private _state:GlobalState,
                private _imageLoader:BaImageLoaderService,
                private _spinner:BaThemeSpinner,
                private _config:BaThemeConfig) {

        this._loadImages();

        this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
            this.isMenuCollapsed = isCollapsed;
        });
    }

    public ngAfterViewInit():void {
        // hide spinner once all loaders are completed
        this._spinner.hideProgress();
        BaThemePreloader.load().then((values) => {
            this._spinner.hide();
        });
    }

    private _loadImages():void {
        // register some loaders
        BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'sky-bg.jpg'));
    }
}
